<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>router,懒加载,传参,动态引入组件</title>
</head>
<body>
  <script>
    /**
     *  react-router BrowserRouter和HashRouter的区别
     * 
     *  BrowserRouter 服务器地址 类似于vue // mode: 'history', // 去掉url中的#
     *  HashRouter 浏览器地址，会在地址栏出现 #/
     *  服务器地址会去请求跳转的路径，如果服务器未配置会返回404
     *  浏览器地址带#号 #号后面的地址变化不会请求服务器以实现本地路由切换
     *  BrowserRouter 包裹最外层即可
     *  HashRouter 需要包裹每个块级路由
     * 
     * **/

     /**
      * //路由懒加载 （依赖react-loadable）
      * // 封装方法  @react/utils/loadable.js
        import React from 'react';
        import Loadable from 'react-loadable';
        const loadingComponent =()=>{//通用的过场组件
            return (
                <div>loading...</div>
            ) 
        }
        export default (loader,loading = loadingComponent)=>{ //过场组件默认采用通用的，若传入了loading，则采用传入的过场组件
            return Loadable({
                loader,
                loading
            });
        }

        //调用
        import loadable from '@react/utils/loadable'; //路由懒加载
        const box = loadable(()=>import('@react/views/box/index.jsx')); //路由懒加载写法
        <Route path='/box' component={box} /> //正常使用即可
     */

     /**
      * //路由传参 跳转 /box
      * //接受参数可以在props中拿到
      *  // <Route path='/box/:time?' component={box} /> //路由配置
        this.props.history.push({
          // pathname: '/box',
          pathname: '/box/' + this.state.nowTime,  //需要配置路由（地址栏）
          search: '?time=' + this.state.nowTime,  //需要自己解析（地址栏）
          query: { //（非地址栏，刷新会消失）
            time: this.state.nowTime
          },
          state: { //（非地址栏，刷新会消失）
            time: this.state.nowTime
          }
        });
      * **/

      /**
       *  动态引入组件
       *  //直接引入即可
          render() {
              const Headers = require("@react/components/header/index.jsx").default
              return (
                  <div>
                    <Headers></Headers>
                  </div>
              )
          };
       * 
      */

      /**
       * //公共api挂载全局变量 (不建议)
       * React.Component.prototype.$utils = utils 
       * 
      */
  </script>
</body>
</html>